3 ways to insert CSS-किसी webpage में CSS कैसे Add करें
इस आर्टिकल मे हम आपको बताने वाले हैं कि How to Insert CSS यानि किसी वेब पेज मे CSS add कैसे किया जाता है। जब हम किसी वेब पेज को browser में open करते हैं तो browser सबसे पहले css stylesheet को read करता है। Browser ये जानना चाहता है कि इस वेब पेज को किस स्टाइल में दिखाना है। उसके बाद ही वेब ब्राउजर उस वेब पेज को css के according ही दिखाता है।
CSS का जनक श्री Hakon Wium Lie को माना जाता है। इन्होने ही सबसे पहले 1994 में CSS Rules को बनाया था और इसके बाद W3C – World Wide Web Consortium द्वारा CSS Level 1 को दिसबंर 1996 में प्रकाशित किया गया। यह CSS का पहला Version कहलाया।
CSS Version 1 से अब तक CSS के 3 ओर Versions को प्रकाशित किया जा चुका हैं। जो क्रमश: CSS Level 2, CSS Level 2.1 और CSS Level 3 हैं। CSS3 इसका latest version है।
3 Ways to Insert CSS
CSS को इन 3 तरीकों से add किया जा सकता है:-
- External CSS
- Internal CSS
- Inline CSS
What is CSS in Hindi-CSS क्या है और इसके क्या फायदे हैं?
Web development सीखने के लिए 4 Best Websites-हिंदी में
अब इन तीनों को विस्तार से जानते हैं।
1.External CSS:-
जब हम किसी वेब पेज की markup language को किसी अन्य file में create की गई css stylesheet से लिंक करते हैं तो उसको External CSS कहते हैं। इसमें HTML फाइल और CSS फाइल अलग-अलग होती है।
इस style में किसी वेबपेज में css को <link> attribute से add किया जाता है।इसमें एक separate file में css coding करके उसे .css extension के साथ save किया जाता है। External css में आपको बार-बार कोड लिखना नहीं पड़ता। आप इस फाइल को किसी भी वेबपेज के साथ लिंक कर सकते हो।
External CSS file में किसी html tag का प्रयोग नहीं होता। इसको किसी भी text editer जैसे notepad में लिखकर .css extension के साथ save किया जा सकता है। इस css फाइल को आप कोई भी नाम दे सकते हो जैसे –mystyle.css , style.css । बस आपकी फाइल के अंत में .css जरूर लगाएं।
External CSS को वेब पेज के <head> section में <link> attribute से add किया जाता है।
See Example :-
<!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head> <body> <h1>ये आपका सबसे important heading है </h1> <p> ये आपका paragraph है.</p> </body> </html>
एक External stylesheet एक stand-alone .css फाइल होती है जिसको multiple web pages के साथ लिंक किया जा सकता है।
Internal CSS
इसमें HTML codes और css codes को एक ही document में define किया जाता है। Internal Stylesheet को html document के head section में <style> और </style> के बीच में define किया जाता है। इसमें किया गया बदलाव सभी tagged elements पर लागू होगा।
Example:-
<html>
<head><title>Internal Stylesheet Example</title>
<style>
body {background-color: red;}
h1 { color: green;}
p { color: blue;}
</style></head>
<body>
<h1> This is a Green Heading</h1>
<p> This is a Blue paragraph</p>
</body></html>3.Inline CSS
Inline Stylesheet का प्रयोग किसी special HTML element को style करने के लिए किया जाता है। इसमें html tag को style attribute से specified किया जाता है।
HTML में Style attribute के साथ किसी भी सी एस एस css property का प्रयोग किया जा सकता है। Inline stylesheet को html document के body section में html element के साथ ही रखा जाता है।
Example: –
<!DOCTYPE html> <html> <head><title>Inline css example</title></head> <body> <h1 style=”color: red; text-align:center;”>This is inline CSS and it will be red and center</h1> <p style=”color: yellow;”>This will be yellow paragraph</p> <p style=”color: blue;”>This will be blue paragraph</p> </body> </html>
Multiple Stylesheet to Insert CSS
अगर किसी वेब पेज में एक से ज्यादा stylesheet दी गई हो तो browser सबसे last में define की गई stylesheet के अनुसार वेब पेज को दिखाता है।
इसको एक उदाहरण से समझते हैं :-
मान लीजिए किसी web page में external stylesheet और internal stylesheet को दोनों को add किया गया हो।
जैसे: मान लीजिए external stylesheet में h1 को blue color में और internal stylesheet में h1 को red color का लिखा गया है।
example 1 में internal css को external css लिंक के नीचे ऐड किया गया है।
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>ये internal stylesheet के कारण red है </h1>
<p>इसमें internal stylesheet को external link के नीचे ऐड किया गया है। </p>
</body>
</html>
Example 2 में external stylesheet link को internal style sheet के नीचे define किया गया है।
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>ये अब blue मे शो होगा </h1>
<p>इसमें external css के link को internal css के नीचे add किया गया है। </p>
</body>
</html>
इस आर्टिकल में आपने CSS add करने के बारें मे सीखा। CSS को सीखना बहुत ही आसान है पर आपको बस इसमें रुचि होनी चाहिए। यहाँ मैंने आपको बहुत अच्छी तरह से बताने की कोशिश की है फिर भी मुझसे कोई गलती हो गई हो तो जरूर बताएं।
About Author
Sant Lal
My Name is Sant Lal From Haryana India.I am a part time blogger and always share usefull information for visiter.I want to help people about blogging, SEO and making money. Aap mujhe support de aur jyada se jyada apne dosto ke sath share kre. Google Plus